<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>企业管理系统 - Vue.js + FastAPI</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        /* 全局样式 */
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
        
        body {
            font-family: 'Inter', sans-serif;
            overflow-x: hidden;
        }
        
        /* 动画效果 */
        .fade-enter-active, .fade-leave-active {
            transition: opacity 0.3s ease;
        }
        
        .fade-enter-from, .fade-leave-to {
            opacity: 0;
        }
        
        .slide-enter-active, .slide-leave-active {
            transition: transform 0.3s ease;
        }
        
        .slide-enter-from, .slide-leave-to {
            transform: translateX(-20px);
            opacity: 0;
        }
        
        /* 自定义滚动条 */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        
        ::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 10px;
        }
        
        ::-webkit-scrollbar-thumb {
            background: #c5c5c5;
            border-radius: 10px;
        }
        
        ::-webkit-scrollbar-thumb:hover {
            background: #a8a8a8;
        }
        
        /* 卡片悬停效果 */
        .card-hover {
            transition: all 0.3s ease;
        }
        
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.1), 0 10px 10px -5px rgba(59, 130, 246, 0.04);
        }
        
        /* 按钮悬停效果 */
        .btn-hover {
            transition: all 0.2s ease;
        }
        
        .btn-hover:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }
        
        .btn-hover:active {
            transform: translateY(0);
        }
        
        /* 导航菜单激活效果 */
        .nav-item {
            transition: all 0.2s ease;
            position: relative;
        }
        
        .nav-item.active::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 4px;
            height: 100%;
            background-color: #3b82f6;
            border-radius: 0 4px 4px 0;
        }
        
        /* 加载动画 */
        .loader {
            border: 2px solid rgba(59, 130, 246, 0.2);
            border-radius: 50%;
            border-top: 2px solid #3b82f6;
            width: 16px;
            height: 16px;
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        /* 模态框动画 */
        .modal-enter-active, .modal-leave-active {
            transition: all 0.3s ease;
        }
        
        .modal-enter-from, .modal-leave-to {
            opacity: 0;
        }
        
        .modal-content-enter-active, .modal-content-leave-active {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .modal-content-enter-from, .modal-content-leave-to {
            opacity: 0;
            transform: scale(0.95) translateY(-20px);
        }
        
        /* 进度条动画 */
        .progress-bar {
            transition: width 0.5s ease;
        }
        
        /* 表格行悬停效果 */
        .table-row-hover:hover {
            background-color: rgba(59, 130, 246, 0.05);
        }
        
        /* 骨架屏样式 */
        .skeleton {
            background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
            background-size: 200% 100%;
            animation: shimmer 1.5s infinite;
        }
        
        @keyframes shimmer {
            0% { background-position: -200% 0; }
            100% { background-position: 200% 0; }
        }
        
        /* 标签样式 */
        .badge {
            transition: all 0.2s ease;
        }
        
        /* 响应式侧边栏 */
        @media (max-width: 768px) {
            .sidebar {
                transform: translateX(-100%);
                transition: transform 0.3s ease;
                position: fixed;
                z-index: 40;
                height: 100vh;
            }
            
            .sidebar.active {
                transform: translateX(0);
            }
            
            .overlay {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-color: rgba(0, 0, 0, 0.5);
                z-index: 30;
                opacity: 0;
                visibility: hidden;
                transition: opacity 0.3s ease;
            }
            
            .overlay.active {
                opacity: 1;
                visibility: visible;
            }
        }
    </style>
</head>
<body class="bg-gray-50 text-gray-800">
    <div id="app">
        <!-- 调试信息 -->
        <div v-if="debugInfo" class="fixed top-0 left-0 right-0 bg-yellow-100 border-b border-yellow-400 text-yellow-700 p-3 text-center z-50 shadow-md">
            <div class="max-w-4xl mx-auto flex justify-between items-center">
                <span>{{ debugInfo }}</span>
                <button @click="debugInfo = ''" class="ml-2 text-sm font-medium text-blue-600 hover:text-blue-800 transition-colors duration-200">关闭</button>
            </div>
        </div>

        <!-- 登录页面 -->
        <div v-if="!isLoggedIn" class="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-500 to-indigo-600 p-4">
            <div class="bg-white rounded-xl shadow-xl w-full max-w-md p-8 transition-all duration-300 hover:shadow-2xl">
                <div class="text-center mb-8">
                    <div class="inline-flex items-center justify-center p-4 bg-blue-100 rounded-full mb-4">
                        <i class="fas fa-building text-3xl text-blue-600"></i>
                    </div>
                    <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-gray-800 mb-2">企业管理系统</h1>
                    <p class="text-gray-600 mb-3">请登录您的账户</p>
                    <p class="text-xs text-gray-500 px-4 py-2 bg-gray-50 rounded-md inline-block">
                        测试账号: admin / 123456
                    </p>
                </div>
                
                <form @submit.prevent="login" class="space-y-5">
                    <div class="space-y-2">
                        <label class="block text-sm font-medium text-gray-700">用户名</label>
                        <input 
                            v-model="loginForm.username" 
                            type="text" 
                            class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 outline-none"
                            placeholder="输入用户名"
                            required
                        >
                    </div>
                    
                    <div class="space-y-2">
                        <label class="block text-sm font-medium text-gray-700">密码</label>
                        <input 
                            v-model="loginForm.password" 
                            type="password" 
                            class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 outline-none"
                            placeholder="输入密码"
                            required
                        >
                    </div>
                    
                    <button 
                        type="submit" 
                        :disabled="loading"
                        class="w-full bg-blue-600 text-white py-2.5 px-4 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 btn-hover"
                    >
                        <span v-if="!loading">登录</span>
                        <span v-else class="flex items-center justify-center space-x-2">
                            <div class="loader"></div>
                            <span>登录中...</span>
                        </span>
                    </button>
                </form>
                
                <div v-if="error" class="mt-5 p-3 bg-red-50 border border-red-200 text-red-700 rounded-lg animate-pulse">
                    <strong>错误：</strong>{{ error }}
                </div>
            </div>
        </div>

        <!-- 主界面 -->
        <div v-else class="min-h-screen bg-gray-50">
            <!-- 导航栏 -->
            <nav class="bg-white shadow-md sticky top-0 z-30">
                <div class="max-w-7xl mx-auto px-4">
                    <div class="flex justify-between items-center h-16">
                        <div class="flex items-center">
                            <button 
                                @click="toggleSidebar" 
                                class="md:hidden p-2 rounded-md text-gray-600 hover:text-gray-900 hover:bg-gray-100 transition-colors duration-200"
                            >
                                <i class="fas fa-bars"></i>
                            </button>
                            <div class="flex items-center ml-4 md:ml-0">
                                <i class="fas fa-building text-2xl text-blue-600 mr-3"></i>
                                <span class="text-xl font-bold text-gray-800">企业管理系统</span>
                            </div>
                        </div>
                        <div class="flex items-center space-x-4">
                            <div class="hidden md:flex items-center space-x-1 text-gray-700">
                                <i class="fas fa-user-circle text-gray-500"></i>
                                <span>欢迎, {{ currentUser?.full_name || '管理员' }}</span>
                            </div>
                            <button 
                                @click="logout" 
                                class="text-red-600 hover:text-red-800 p-2 rounded-md hover:bg-red-50 transition-colors duration-200"
                            >
                                <i class="fas fa-sign-out-alt"></i>
                                <span class="hidden md:inline ml-1">退出</span>
                            </button>
                        </div>
                    </div>
                </div>
            </nav>

            <!-- 移动端侧边栏遮罩 -->
            <div v-if="mobileSidebarOpen" @click="toggleSidebar" class="overlay active md:hidden"></div>

            <div class="flex">
                <!-- 侧边栏 -->
                <div :class="['sidebar w-64 bg-white shadow-lg min-h-screen transform transition-transform duration-300 ease-in-out', { 'active': mobileSidebarOpen }]">
                    <div class="p-4">
                        <nav class="space-y-1">
                            <button 
                                @click="currentView = 'dashboard'" 
                                :class="['w-full text-left px-4 py-3 rounded-lg flex items-center space-x-2 transition-all duration-200', currentView === 'dashboard' ? 'bg-blue-50 text-blue-700 nav-item active font-medium' : 'hover:bg-gray-50 text-gray-700']"
                            >
                                <i class="fas fa-tachometer-alt w-5 text-center"></i>
                                <span>仪表盘</span>
                            </button>
                            <button 
                                @click="currentView = 'users'" 
                                :class="['w-full text-left px-4 py-3 rounded-lg flex items-center space-x-2 transition-all duration-200', currentView === 'users' ? 'bg-blue-50 text-blue-700 nav-item active font-medium' : 'hover:bg-gray-50 text-gray-700']"
                            >
                                <i class="fas fa-users w-5 text-center"></i>
                                <span>用户管理</span>
                            </button>
                            <button 
                                @click="currentView = 'departments'" 
                                :class="['w-full text-left px-4 py-3 rounded-lg flex items-center space-x-2 transition-all duration-200', currentView === 'departments' ? 'bg-blue-50 text-blue-700 nav-item active font-medium' : 'hover:bg-gray-50 text-gray-700']"
                            >
                                <i class="fas fa-sitemap w-5 text-center"></i>
                                <span>部门管理</span>
                            </button>
                            <button 
                                @click="currentView = 'projects'" 
                                :class="['w-full text-left px-4 py-3 rounded-lg flex items-center space-x-2 transition-all duration-200', currentView === 'projects' ? 'bg-blue-50 text-blue-700 nav-item active font-medium' : 'hover:bg-gray-50 text-gray-700']"
                            >
                                <i class="fas fa-project-diagram w-5 text-center"></i>
                                <span>项目管理</span>
                            </button>
                        </nav>
                    </div>
                </div>

                <!-- 主内容区域 -->
                <div class="flex-1 p-4 md:p-6">
                    <!-- 仪表盘 -->
                    <div v-if="currentView === 'dashboard'" class="space-y-6">
                        <div class="flex justify-between items-center">
                            <h1 class="text-2xl md:text-3xl font-bold text-gray-800">仪表盘</h1>
                            <button @click="refreshData" class="text-blue-600 hover:text-blue-800 p-2 rounded-md hover:bg-blue-50 transition-colors duration-200 btn-hover">
                                <i class="fas fa-sync-alt"></i>
                                <span class="hidden md:inline ml-1">刷新数据</span>
                            </button>
                        </div>
                        
                        <!-- 统计卡片 -->
                        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6">
                            <div class="bg-white rounded-xl shadow p-6 card-hover">
                                <div class="flex items-center">
                                    <div class="p-3 rounded-full bg-blue-100 text-blue-600">
                                        <i class="fas fa-users text-xl"></i>
                                    </div>
                                    <div class="ml-4">
                                        <p class="text-sm font-medium text-gray-500">总用户数</p>
                                        <p class="text-2xl font-bold text-gray-900">{{ users.length || 0 }}</p>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="bg-white rounded-xl shadow p-6 card-hover">
                                <div class="flex items-center">
                                    <div class="p-3 rounded-full bg-green-100 text-green-600">
                                        <i class="fas fa-sitemap text-xl"></i>
                                    </div>
                                    <div class="ml-4">
                                        <p class="text-sm font-medium text-gray-500">总部门数</p>
                                        <p class="text-2xl font-bold text-gray-900">{{ departments.length || 0 }}</p>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="bg-white rounded-xl shadow p-6 card-hover">
                                <div class="flex items-center">
                                    <div class="p-3 rounded-full bg-purple-100 text-purple-600">
                                        <i class="fas fa-project-diagram text-xl"></i>
                                    </div>
                                    <div class="ml-4">
                                        <p class="text-sm font-medium text-gray-500">总项目数</p>
                                        <p class="text-2xl font-bold text-gray-900">{{ projects.length || 0 }}</p>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="bg-white rounded-xl shadow p-6 card-hover">
                                <div class="flex items-center">
                                    <div class="p-3 rounded-full bg-yellow-100 text-yellow-600">
                                        <i class="fas fa-clock text-xl"></i>
                                    </div>
                                    <div class="ml-4">
                                        <p class="text-sm font-medium text-gray-500">进行中项目</p>
                                        <p class="text-2xl font-bold text-gray-900">{{ activeProjects.length || 0 }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 用户管理 -->
                    <div v-if="currentView === 'users'" class="space-y-6">
                        <div class="flex justify-between items-center flex-wrap gap-4">
                            <h1 class="text-2xl md:text-3xl font-bold text-gray-800">用户管理</h1>
                            <button 
                                @click="openUserModal()" 
                                class="bg-blue-600 text-white px-4 py-2.5 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 btn-hover flex items-center space-x-2"
                            >
                                <i class="fas fa-plus"></i>
                                <span>添加用户</span>
                            </button>
                        </div>
                        
                        <div class="bg-white rounded-xl shadow overflow-hidden">
                            <div class="overflow-x-auto">
                                <table class="min-w-full divide-y divide-gray-200">
                                    <thead class="bg-gray-50">
                                        <tr>
                                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
                                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">用户名</th>
                                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">姓名</th>
                                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">邮箱</th>
                                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">部门</th>
                                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">角色</th>
                                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">创建时间</th>
                                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                                        </tr>
                                    </thead>
                                    <tbody class="bg-white divide-y divide-gray-200">
                                        <tr v-for="user in users" :key="user.id" class="table-row-hover transition-colors duration-200">
                                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ user.id }}</td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ user.username }}</td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ user.full_name }}</td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ user.email }}</td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ user.department?.name || '无部门' }}</td>
                                            <td class="px-6 py-4 whitespace-nowrap">
                                                <span class="px-2 py-1 text-xs font-medium rounded-full bg-blue-100 text-blue-800">
                                                    {{ user.role || 'user' }}
                                                </span>
                                            </td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ formatDate(user.created_at) }}</td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium space-x-3">
                                                <button 
                                                    @click="editUser(user)" 
                                                    class="text-blue-600 hover:text-blue-900 p-1 rounded-md hover:bg-blue-50 transition-colors duration-200"
                                                    title="编辑"
                                                >
                                                    <i class="fas fa-edit"></i>
                                                </button>
                                                <button 
                                                    @click="deleteUser(user.id)" 
                                                    class="text-red-600 hover:text-red-900 p-1 rounded-md hover:bg-red-50 transition-colors duration-200"
                                                    title="删除"
                                                >
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <!-- 部门管理 -->
                    <div v-if="currentView === 'departments'" class="space-y-6">
                        <div class="flex justify-between items-center flex-wrap gap-4">
                            <h1 class="text-2xl md:text-3xl font-bold text-gray-800">部门管理</h1>
                            <button 
                                @click="openDepartmentModal()" 
                                class="bg-green-600 text-white px-4 py-2.5 rounded-lg hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 btn-hover flex items-center space-x-2"
                            >
                                <i class="fas fa-plus"></i>
                                <span>添加部门</span>
                            </button>
                        </div>
                        
                        <div class="bg-white rounded-xl shadow overflow-hidden">
                            <div class="overflow-x-auto">
                                <table class="min-w-full divide-y divide-gray-200">
                                    <thead class="bg-gray-50">
                                        <tr>
                                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
                                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">部门名称</th>
                                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">描述</th>
                                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">负责人</th>
                                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">创建时间</th>
                                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                                        </tr>
                                    </thead>
                                    <tbody class="bg-white divide-y divide-gray-200">
                                        <tr v-for="dept in departments" :key="dept.id" class="table-row-hover transition-colors duration-200">
                                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ dept.id }}</td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ dept.name }}</td>
                                            <td class="px-6 py-4 text-sm text-gray-900">{{ dept.description || '无描述' }}</td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ dept.manager?.full_name || '未分配' }}</td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ formatDate(dept.created_at) }}</td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium space-x-3">
                                                <button 
                                                    @click="editDepartment(dept)" 
                                                    class="text-blue-600 hover:text-blue-900 p-1 rounded-md hover:bg-blue-50 transition-colors duration-200"
                                                    title="编辑"
                                                >
                                                    <i class="fas fa-edit"></i>
                                                </button>
                                                <button 
                                                    @click="deleteDepartment(dept.id)" 
                                                    class="text-red-600 hover:text-red-900 p-1 rounded-md hover:bg-red-50 transition-colors duration-200"
                                                    title="删除"
                                                >
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <!-- 项目管理 -->
                    <div v-if="currentView === 'projects'" class="space-y-6">
                        <div class="flex justify-between items-center flex-wrap gap-4">
                            <h1 class="text-2xl md:text-3xl font-bold text-gray-800">项目管理</h1>
                            <button 
                                @click="openProjectModal()" 
                                class="bg-purple-600 text-white px-4 py-2.5 rounded-lg hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 btn-hover flex items-center space-x-2"
                            >
                                <i class="fas fa-plus"></i>
                                <span>添加项目</span>
                            </button>
                        </div>
                        
                        <div class="bg-white rounded-xl shadow overflow-hidden">
                            <div class="overflow-x-auto">
                                <table class="min-w-full divide-y divide-gray-200">
                                    <thead class="bg-gray-50">
                                        <tr>
                                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
                                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">项目名称</th>
                                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">优先级</th>
                                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">部门</th>
                                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">负责人</th>
                                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">进度</th>
                                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">创建时间</th>
                                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                                        </tr>
                                    </thead>
                                    <tbody class="bg-white divide-y divide-gray-200">
                                        <tr v-for="project in projects" :key="project.id" class="table-row-hover transition-colors duration-200">
                                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ project.id }}</td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ project.name }}</td>
                                            <td class="px-6 py-4 whitespace-nowrap">
                                                <span :class="getStatusClass(project.status)" class="px-2 py-1 text-xs font-medium rounded-full badge">
                                                    {{ getStatusText(project.status) }}
                                                </span>
                                            </td>
                                            <td class="px-6 py-4 whitespace-nowrap">
                                                <span :class="getPriorityClass(project.priority)" class="px-2 py-1 text-xs font-medium rounded-full badge">
                                                    {{ getPriorityText(project.priority) }}
                                                </span>
                                            </td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ project.department?.name || '未分配' }}</td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ project.manager?.full_name || '未分配' }}</td>
                                            <td class="px-6 py-4 whitespace-nowrap">
                                                <div class="flex items-center">
                                                    <div class="w-24 bg-gray-200 rounded-full h-2.5 mr-3 overflow-hidden">
                                                        <div 
                                                            :style="{width: project.progress + '%'}" 
                                                            class="bg-blue-600 h-2.5 rounded-full progress-bar"
                                                        ></div>
                                                    </div>
                                                    <span class="text-sm text-gray-900 font-medium">{{ project.progress }}%</span>
                                                </div>
                                            </td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ formatDate(project.created_at) }}</td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium space-x-3">
                                                <button 
                                                    @click="editProject(project)" 
                                                    class="text-blue-600 hover:text-blue-900 p-1 rounded-md hover:bg-blue-50 transition-colors duration-200"
                                                    title="编辑"
                                                >
                                                    <i class="fas fa-edit"></i>
                                                </button>
                                                <button 
                                                    @click="deleteProject(project.id)" 
                                                    class="text-red-600 hover:text-red-900 p-1 rounded-md hover:bg-red-50 transition-colors duration-200"
                                                    title="删除"
                                                >
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 用户模态框 -->
        <div v-if="showUserModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50 modal-enter-active">
            <div class="relative top-1/4 mx-auto p-6 border w-full max-w-md shadow-xl rounded-xl bg-white modal-content-enter-active">
                <div class="flex justify-between items-start mb-4">
                    <h3 class="text-lg font-semibold leading-6 text-gray-900">
                        {{ editingUser ? '编辑用户' : '添加用户' }}
                    </h3>
                    <button 
                        @click="closeUserModal" 
                        class="text-gray-400 hover:text-gray-500 p-1 rounded-md hover:bg-gray-100 transition-colors duration-200"
                    >
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <form @submit.prevent="saveUser" class="space-y-5">
                    <div class="space-y-2">
                        <label class="block text-sm font-medium text-gray-700">用户名</label>
                        <input v-model="userForm.username" type="text" class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50 transition-all duration-200" required>
                    </div>
                    <div class="space-y-2">
                        <label class="block text-sm font-medium text-gray-700">姓名</label>
                        <input v-model="userForm.full_name" type="text" class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50 transition-all duration-200" required>
                    </div>
                    <div class="space-y-2">
                        <label class="block text-sm font-medium text-gray-700">邮箱</label>
                        <input v-model="userForm.email" type="email" class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50 transition-all duration-200" required>
                    </div>
                    <div class="space-y-2">
                        <label class="block text-sm font-medium text-gray-700">部门</label>
                        <select v-model="userForm.department_id" class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50 transition-all duration-200">
                            <option value="">选择部门</option>
                            <option v-for="dept in departments" :key="dept.id" :value="dept.id">{{ dept.name }}</option>
                        </select>
                    </div>
                    <div class="space-y-2">
                        <label class="block text-sm font-medium text-gray-700">角色</label>
                        <select v-model="userForm.role" class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50 transition-all duration-200">
                            <option value="user">普通用户</option>
                            <option value="admin">管理员</option>
                        </select>
                    </div>
                    <div v-if="!editingUser" class="space-y-2">
                        <label class="block text-sm font-medium text-gray-700">密码</label>
                        <input v-model="userForm.password" type="password" class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50 transition-all duration-200" required>
                    </div>
                    <div class="flex justify-end space-x-3 pt-2">
                        <button 
                            type="button" 
                            @click="closeUserModal" 
                            class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500 btn-hover"
                        >
                            取消
                        </button>
                        <button 
                            type="submit" 
                            :disabled="loading" 
                            class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 btn-hover disabled:opacity-50"
                        >
                            <span v-if="!loading">保存</span>
                            <span v-else class="flex items-center justify-center space-x-2">
                                <div class="loader"></div>
                                <span>保存中...</span>
                            </span>
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- 部门模态框 -->
        <div v-if="showDepartmentModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50 modal-enter-active">
            <div class="relative top-1/4 mx-auto p-6 border w-full max-w-md shadow-xl rounded-xl bg-white modal-content-enter-active">
                <div class="flex justify-between items-start mb-4">
                    <h3 class="text-lg font-semibold leading-6 text-gray-900">
                        {{ editingDepartment ? '编辑部门' : '添加部门' }}
                    </h3>
                    <button 
                        @click="closeDepartmentModal" 
                        class="text-gray-400 hover:text-gray-500 p-1 rounded-md hover:bg-gray-100 transition-colors duration-200"
                    >
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <form @submit.prevent="saveDepartment" class="space-y-5">
                    <div class="space-y-2">
                        <label class="block text-sm font-medium text-gray-700">部门名称</label>
                        <input v-model="departmentForm.name" type="text" class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-green-500 focus:ring focus:ring-green-500 focus:ring-opacity-50 transition-all duration-200" required>
                    </div>
                    <div class="space-y-2">
                        <label class="block text-sm font-medium text-gray-700">描述</label>
                        <textarea v-model="departmentForm.description" class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-green-500 focus:ring focus:ring-green-500 focus:ring-opacity-50 transition-all duration-200" rows="3"></textarea>
                    </div>
                    <div class="space-y-2">
                        <label class="block text-sm font-medium text-gray-700">负责人</label>
                        <select v-model="departmentForm.manager" class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-green-500 focus:ring focus:ring-green-500 focus:ring-opacity-50 transition-all duration-200">
                            <option value="">选择负责人</option>
                            <option v-for="user in users" :key="user.id" :value="user.id">{{ user.full_name }}</option>
                        </select>
                    </div>
                    <div class="flex justify-end space-x-3 pt-2">
                        <button 
                            type="button" 
                            @click="closeDepartmentModal" 
                            class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500 btn-hover"
                        >
                            取消
                        </button>
                        <button 
                            type="submit" 
                            :disabled="loading" 
                            class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 btn-hover disabled:opacity-50"
                        >
                            <span v-if="!loading">保存</span>
                            <span v-else class="flex items-center justify-center space-x-2">
                                <div class="loader"></div>
                                <span>保存中...</span>
                            </span>
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- 项目模态框 -->
        <div v-if="showProjectModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50 modal-enter-active">
            <div class="relative top-10 mx-auto p-6 border w-full max-w-2xl shadow-xl rounded-xl bg-white modal-content-enter-active">
                <div class="flex justify-between items-start mb-4">
                    <h3 class="text-lg font-semibold leading-6 text-gray-900">
                        {{ editingProject ? '编辑项目' : '添加项目' }}
                    </h3>
                    <button 
                        @click="closeProjectModal" 
                        class="text-gray-400 hover:text-gray-500 p-1 rounded-md hover:bg-gray-100 transition-colors duration-200"
                    >
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <form @submit.prevent="saveProject" class="space-y-5">
                    <div class="space-y-2">
                        <label class="block text-sm font-medium text-gray-700">项目名称</label>
                        <input v-model="projectForm.name" type="text" class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-purple-500 focus:ring focus:ring-purple-500 focus:ring-opacity-50 transition-all duration-200" required>
                    </div>
                    <div class="space-y-2">
                        <label class="block text-sm font-medium text-gray-700">描述</label>
                        <textarea v-model="projectForm.description" class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-purple-500 focus:ring focus:ring-purple-500 focus:ring-opacity-50 transition-all duration-200" rows="3"></textarea>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                        <div class="space-y-2">
                            <label class="block text-sm font-medium text-gray-700">状态</label>
                            <select v-model="projectForm.status" class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-purple-500 focus:ring focus:ring-purple-500 focus:ring-opacity-50 transition-all duration-200">
                                <option value="planning">规划中</option>
                                <option value="in_progress">进行中</option>
                                <option value="completed">已完成</option>
                                <option value="on_hold">暂停</option>
                            </select>
                        </div>
                        <div class="space-y-2">
                            <label class="block text-sm font-medium text-gray-700">优先级</label>
                            <select v-model="projectForm.priority" class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-purple-500 focus:ring focus:ring-purple-500 focus:ring-opacity-50 transition-all duration-200">
                                <option value="low">低</option>
                                <option value="medium">中</option>
                                <option value="high">高</option>
                            </select>
                        </div>
                    </div>
                    <div class="space-y-2">
                        <label class="block text-sm font-medium text-gray-700">部门</label>
                        <select v-model="projectForm.department_id" class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-purple-500 focus:ring focus:ring-purple-500 focus:ring-opacity-50 transition-all duration-200">
                            <option value="">选择部门</option>
                            <option v-for="dept in departments" :key="dept.id" :value="dept.id">{{ dept.name }}</option>
                        </select>
                    </div>
                    <div class="space-y-2">
                        <label class="block text-sm font-medium text-gray-700">负责人</label>
                        <select v-model="projectForm.manager_id" class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-purple-500 focus:ring focus:ring-purple-500 focus:ring-opacity-50 transition-all duration-200">
                            <option value="">选择负责人</option>
                            <option v-for="user in users" :key="user.id" :value="user.id">{{ user.full_name }}</option>
                        </select>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                        <div class="space-y-2">
                            <label class="block text-sm font-medium text-gray-700">预算</label>
                            <input v-model="projectForm.budget" type="number" class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-purple-500 focus:ring focus:ring-purple-500 focus:ring-opacity-50 transition-all duration-200">
                        </div>
                        <div class="space-y-2">
                            <label class="block text-sm font-medium text-gray-700">进度 (%)</label>
                            <input v-model="projectForm.progress" type="number" min="0" max="100" class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-purple-500 focus:ring focus:ring-purple-500 focus:ring-opacity-50 transition-all duration-200">
                        </div>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                        <div class="space-y-2">
                            <label class="block text-sm font-medium text-gray-700">开始日期</label>
                            <input v-model="projectForm.start_date" type="date" class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-purple-500 focus:ring focus:ring-purple-500 focus:ring-opacity-50 transition-all duration-200">
                        </div>
                        <div class="space-y-2">
                            <label class="block text-sm font-medium text-gray-700">结束日期</label>
                            <input v-model="projectForm.end_date" type="date" class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-purple-500 focus:ring focus:ring-purple-500 focus:ring-opacity-50 transition-all duration-200">
                        </div>
                    </div>
                    <div class="flex justify-end space-x-3 pt-2">
                        <button 
                            type="button" 
                            @click="closeProjectModal" 
                            class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500 btn-hover"
                        >
                            取消
                        </button>
                        <button 
                            type="submit" 
                            :disabled="loading" 
                            class="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 btn-hover disabled:opacity-50"
                        >
                            <span v-if="!loading">保存</span>
                            <span v-else class="flex items-center justify-center space-x-2">
                                <div class="loader"></div>
                                <span>保存中...</span>
                            </span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        // Vue应用逻辑，保持原有功能不变
        const { createApp, ref, computed, onMounted } = Vue;
        
        createApp({
            setup() {
                const isLoggedIn = ref(false);
                const currentView = ref('dashboard');
                const currentUser = ref(null);
                const loading = ref(false);
                const error = ref('');
                const debugInfo = ref('');
                const mobileSidebarOpen = ref(false);
                
                const loginForm = ref({
                    username: '',
                    password: ''
                });

                const users = ref([]);
                const departments = ref([]);
                const projects = ref([]);

                const showUserModal = ref(false);
                const showDepartmentModal = ref(false);
                const showProjectModal = ref(false);

                const editingUser = ref(null);
                const editingDepartment = ref(null);
                const editingProject = ref(null);

                const userForm = ref({
                    username: '',
                    full_name: '',
                    email: '',
                    department_id: '',
                    role: 'user',
                    password: ''
                });

                const departmentForm = ref({
                    name: '',
                    description: '',
                    manager: ''
                });

                const projectForm = ref({
                    name: '',
                    description: '',
                    status: 'planning',
                    priority: 'medium',
                    department_id: '',
                    manager_id: '',
                    budget: 0,
                    progress: 0,
                    start_date: '',
                    end_date: ''
                });

                const departmentOptions = computed(() => {
                    return departments.value.map(dept => ({
                        value: dept.id,
                        text: dept.name
                    }));
                });

                const userOptions = computed(() => {
                    return users.value.map(user => ({
                        value: user.id,
                        text: user.full_name
                    }));
                });

                const activeProjects = computed(() => {
                    return projects.value.filter(project => project.status === 'in_progress');
                });

                const login = async () => {
                    if (!loginForm.value.username || !loginForm.value.password) {
                        error.value = '请填写用户名和密码';
                        return;
                    }

                    loading.value = true;
                    error.value = '';

                    try {
                        const response = await axios.post('http://localhost:5000/api/auth/login', {
                            username: loginForm.value.username,
                            password: loginForm.value.password
                        });

                        const { access_token, user } = response.data;
                        
                        localStorage.setItem('token', access_token);
                        localStorage.setItem('user', JSON.stringify(user));
                        
                        isLoggedIn.value = true;
                        currentUser.value = user;
                        
                        // 加载数据
                        await loadAllData();
                        
                    } catch (err) {
                        error.value = err.response?.data?.detail || '登录失败';
                    } finally {
                        loading.value = false;
                    }
                };

                const logout = () => {
                    localStorage.removeItem('token');
                    localStorage.removeItem('user');
                    isLoggedIn.value = false;
                    currentUser.value = null;
                    loginForm.value = { username: '', password: '' };
                    mobileSidebarOpen.value = false;
                };

                const formatDate = (dateString) => {
                    if (!dateString) return '';
                    return new Date(dateString).toLocaleDateString('zh-CN');
                };

                const loadAllData = async () => {
                    if (!isLoggedIn.value) return;
                    
                    loading.value = true;
                    try {
                        const [usersRes, departmentsRes, projectsRes] = await Promise.all([
                            axios.get('http://localhost:5000/api/users'),
                            axios.get('http://localhost:5000/api/departments'),
                            axios.get('http://localhost:5000/api/projects')
                        ]);

                        users.value = usersRes.data.users || [];
                        departments.value = departmentsRes.data.departments || [];
                        projects.value = projectsRes.data.projects || [];
                        
                    } catch (err) {
                        console.error('加载数据失败:', err);
                        debugInfo.value = '加载数据失败: ' + (err.response?.data?.error || err.message);
                    } finally {
                        loading.value = false;
                    }
                };

                // 刷新数据
                const refreshData = async () => {
                    await loadAllData();
                };

                // 切换移动端侧边栏
                const toggleSidebar = () => {
                    mobileSidebarOpen.value = !mobileSidebarOpen.value;
                };

                // 用户管理函数
                const openUserModal = (user = null) => {
                    if (user) {
                        editingUser.value = user;
                        userForm.value = {
                            username: user.username,
                            full_name: user.full_name,
                            email: user.email,
                            department_id: user.department_id || '',
                            role: user.role || 'user',
                            password: ''
                        };
                    } else {
                        editingUser.value = null;
                        userForm.value = {
                            username: '',
                            full_name: '',
                            email: '',
                            department_id: '',
                            role: 'user',
                            password: ''
                        };
                    }
                    showUserModal.value = true;
                };

                const closeUserModal = () => {
                    showUserModal.value = false;
                    editingUser.value = null;
                };

                const saveUser = async () => {
                    if (!userForm.value.username || !userForm.value.full_name || !userForm.value.email) {
                        alert('请填写必填字段');
                        return;
                    }

                    loading.value = true;
                    try {
                        const url = editingUser.value ? `/users/${editingUser.value.id}` : '/users';
                        const method = editingUser.value ? 'put' : 'post';
                        
                        const response = await axios[method](url, userForm.value);
                        
                        if (editingUser.value) {
                            const index = users.value.findIndex(u => u.id === editingUser.value.id);
                            if (index !== -1) {
                                users.value[index] = response.data.user;
                            }
                        } else {
                            users.value.unshift(response.data.user);
                        }
                        
                        closeUserModal();
                        alert(response.data.message);
                    } catch (err) {
                        alert(err.response?.data?.error || '操作失败');
                    } finally {
                        loading.value = false;
                    }
                };

                const deleteUser = async (userId) => {
                    if (!confirm('确定要删除这个用户吗？此操作不可撤销！')) {
                        return;
                    }

                    loading.value = true;
                    try {
                        await axios.delete(`/users/${userId}`);
                        users.value = users.value.filter(u => u.id !== userId);
                        alert('用户删除成功');
                    } catch (err) {
                        alert(err.response?.data?.error || '删除失败');
                    } finally {
                        loading.value = false;
                    }
                };

                // 部门管理函数
                const openDepartmentModal = (department = null) => {
                    if (department) {
                        editingDepartment.value = department;
                        departmentForm.value = {
                            name: department.name,
                            description: department.description || '',
                            manager: department.manager_id || ''
                        };
                    } else {
                        editingDepartment.value = null;
                        departmentForm.value = {
                            name: '',
                            description: '',
                            manager: ''
                        };
                    }
                    showDepartmentModal.value = true;
                };

                const closeDepartmentModal = () => {
                    showDepartmentModal.value = false;
                    editingDepartment.value = null;
                };

                const saveDepartment = async () => {
                    if (!departmentForm.value.name) {
                        alert('部门名称不能为空');
                        return;
                    }

                    loading.value = true;
                    try {
                        const url = editingDepartment.value ? `/departments/${editingDepartment.value.id}` : '/departments';
                        const method = editingDepartment.value ? 'put' : 'post';
                        
                        const response = await axios[method](url, departmentForm.value);
                        
                        if (editingDepartment.value) {
                            const index = departments.value.findIndex(d => d.id === editingDepartment.value.id);
                            if (index !== -1) {
                                departments.value[index] = response.data.department;
                            }
                        } else {
                            departments.value.unshift(response.data.department);
                        }
                        
                        closeDepartmentModal();
                        alert(response.data.message);
                    } catch (err) {
                        alert(err.response?.data?.error || '操作失败');
                    } finally {
                        loading.value = false;
                    }
                };

                const deleteDepartment = async (deptId) => {
                    if (!confirm('确定要删除这个部门吗？此操作不可撤销！')) {
                        return;
                    }

                    loading.value = true;
                    try {
                        await axios.delete(`/departments/${deptId}`);
                        departments.value = departments.value.filter(d => d.id !== deptId);
                        alert('部门删除成功');
                    } catch (err) {
                        alert(err.response?.data?.error || '删除失败');
                    } finally {
                        loading.value = false;
                    }
                };

                // 项目管理函数
                const openProjectModal = (project = null) => {
                    if (project) {
                        editingProject.value = project;
                        projectForm.value = {
                            name: project.name,
                            description: project.description || '',
                            status: project.status || 'planning',
                            priority: project.priority || 'medium',
                            department_id: project.department_id || '',
                            manager_id: project.manager_id || '',
                            budget: project.budget || 0,
                            progress: project.progress || 0,
                            start_date: project.start_date || '',
                            end_date: project.end_date || ''
                        };
                    } else {
                        editingProject.value = null;
                        projectForm.value = {
                            name: '',
                            description: '',
                            status: 'planning',
                            priority: 'medium',
                            department_id: '',
                            manager_id: '',
                            budget: 0,
                            progress: 0,
                            start_date: '',
                            end_date: ''
                        };
                    }
                    showProjectModal.value = true;
                };

                const closeProjectModal = () => {
                    showProjectModal.value = false;
                    editingProject.value = null;
                };

                const saveProject = async () => {
                    if (!projectForm.value.name) {
                        alert('项目名称不能为空');
                        return;
                    }

                    loading.value = true;
                    try {
                        const url = editingProject.value ? `/projects/${editingProject.value.id}` : '/projects';
                        const method = editingProject.value ? 'put' : 'post';
                        
                        const response = await axios[method](url, projectForm.value);
                        
                        if (editingProject.value) {
                            const index = projects.value.findIndex(p => p.id === editingProject.value.id);
                            if (index !== -1) {
                                projects.value[index] = response.data.project;
                            }
                        } else {
                            projects.value.unshift(response.data.project);
                        }
                        
                        closeProjectModal();
                        alert(response.data.message);
                    } catch (err) {
                        alert(err.response?.data?.error || '操作失败');
                    } finally {
                        loading.value = false;
                    }
                };

                const deleteProject = async (projectId) => {
                    if (!confirm('确定要删除这个项目吗？此操作不可撤销！')) {
                        return;
                    }

                    loading.value = true;
                    try {
                        await axios.delete(`/projects/${projectId}`);
                        projects.value = projects.value.filter(p => p.id !== projectId);
                        alert('项目删除成功');
                    } catch (err) {
                        alert(err.response?.data?.error || '删除失败');
                    } finally {
                        loading.value = false;
                    }
                };

                // 辅助函数
                const getStatusClass = (status) => {
                    const classes = {
                        planning: 'bg-gray-100 text-gray-800',
                        in_progress: 'bg-blue-100 text-blue-800',
                        completed: 'bg-green-100 text-green-800',
                        on_hold: 'bg-yellow-100 text-yellow-800'
                    };
                    return classes[status] || 'bg-gray-100 text-gray-800';
                };

                const getStatusText = (status) => {
                    const texts = {
                        planning: '规划中',
                        in_progress: '进行中',
                        completed: '已完成',
                        on_hold: '暂停'
                    };
                    return texts[status] || status;
                };

                const getPriorityClass = (priority) => {
                    const classes = {
                        low: 'bg-green-100 text-green-800',
                        medium: 'bg-yellow-100 text-yellow-800',
                        high: 'bg-red-100 text-red-800'
                    };
                    return classes[priority] || 'bg-gray-100 text-gray-800';
                };

                const getPriorityText = (priority) => {
                    const texts = {
                        low: '低',
                        medium: '中',
                        high: '高'
                    };
                    return texts[priority] || priority;
                };

                // 更新原来的编辑函数
                const editUser = openUserModal;
                const editDepartment = openDepartmentModal;
                const editProject = openProjectModal;

                onMounted(() => {
                    const token = localStorage.getItem('token');
                    const user = localStorage.getItem('user');
                    
                    if (token && user) {
                        isLoggedIn.value = true;
                        currentUser.value = JSON.parse(user);
                        loadAllData();
                    }
                });

                return {
                    isLoggedIn,
                    currentView,
                    currentUser,
                    loading,
                    error,
                    debugInfo,
                    mobileSidebarOpen,
                    loginForm,
                    users,
                    departments,
                    projects,
                    activeProjects,
                    showUserModal,
                    showDepartmentModal,
                    showProjectModal,
                    editingUser,
                    editingDepartment,
                    editingProject,
                    userForm,
                    departmentForm,
                    projectForm,
                    departmentOptions,
                    userOptions,
                    login,
                    logout,
                    formatDate,
                    loadAllData,
                    refreshData,
                    toggleSidebar,
                    openUserModal,
                    closeUserModal,
                    saveUser,
                    deleteUser,
                    openDepartmentModal,
                    closeDepartmentModal,
                    saveDepartment,
                    deleteDepartment,
                    openProjectModal,
                    closeProjectModal,
                    saveProject,
                    deleteProject,
                    editUser,
                    editDepartment,
                    editProject,
                    getStatusClass,
                    getStatusText,
                    getPriorityClass,
                    getPriorityText
                };
            }
        }).mount('#app');
    </script>
</body>
</html>